<template>
  <div class="content">
    <div class="top">
      <el-select
        v-model="topsearch.value"
        clearable
        placeholder="家具选择状态"
        style="width: 20%"
      >
        <el-option
          v-for="item in valueList"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="block">
        <el-date-picker
          v-model="topsearch.value2"
          type="daterange"
          value-format="yyyy-MM-dd"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>

      <el-input
        v-model="topsearch.homenum"
        placeholder="房号"
        class="ipt"
      ></el-input>
      <!-- 日期 -->

      <el-button
        type="primary"
        icon="el-icon-search"
        @click="search"
        style="margin-left: 20px"
        class="button1"
        >查询</el-button
      >
    </div>

    <!-- 选项卡表格1 -->
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="智能设备" name="1" style="background-color: white">
        <el-table
          ref="multipleTable"
          :data="device"
          border
          stripe
          align="center"
          tooltip-effect="dark"
          :header-cell-style="{
            background: '#eef1f6',
            color: '#1f2d3d',
            'border-color': '#dfe6ec',
          }"
          style="width: 100%; font-size: 14px; color: #1f2d3d"
          v-loading="loading"
        >
          <el-table-column prop="unitname" label="单元名称 " align="center">
          </el-table-column>
          <el-table-column
            prop="buildnum"
            label="幢号"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="homenum" label="房号" align="center">
          </el-table-column>
          <el-table-column prop="homename" label="房主" align="center">
          </el-table-column>
          <el-table-column prop="airnum" label="空调" align="center">
          </el-table-column>
          <el-table-column prop="wifiname" label="Wi-Fi" align="center">
          </el-table-column>
          <el-table-column prop="washnum" label="洗衣机" align="center">
          </el-table-column>
          <el-table-column
            prop="createtime"
            label="授予时间"
            show-overflow-tooltip
            align="center"
            width="200px"
          >
            <template slot-scope="scope">
              {{ getFormattedTime(scope.row.createtime) }}
            </template>
          </el-table-column>
          <el-table-column prop="smartstatus" label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.smartstatus == 1">完好</span>
              <span v-if="scope.row.smartstatus == null">待维修</span>
              <span v-if="scope.row.smartstatus == 2">待维修</span>
            </template>
          </el-table-column>
          <el-table-column prop="smartstatus" label="操作状态" align="center">
            <template slot-scope="scope">
              <el-tooltip
                :content="'Switch statue: ' + scope.row.smartstatus"
                placement="top"
              >
                <el-switch
                  @change="handleSwitchChange(scope.row)"
                  v-model="scope.row.smartstatus"
                  :active-value="1"
                  :inactive-value="2"
                >
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="家居设备" name="2" style="background-color: white">
        <el-table
          ref="multipleTable"
          :data="device"
          border
          stripe
          align="center"
          tooltip-effect="dark"
          :header-cell-style="{
            background: '#eef1f6',
            color: '#1f2d3d',
            'border-color': '#dfe6ec',
          }"
          style="width: 100%; font-size: 14px; color: #1f2d3d"
          v-loading="loading"
        >
          <el-table-column prop="unitname" label="单元名称 " align="center">
          </el-table-column>
          <el-table-column
            prop="buildnum"
            label="幢号"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="homenum" label="房号" align="center">
          </el-table-column>
          <el-table-column prop="homename" label="房主" align="center">
          </el-table-column>
          <el-table-column prop="homedesk" label="书桌" align="center">
          </el-table-column>
          <el-table-column prop="homechair" label="椅子" align="center">
          </el-table-column>
          <el-table-column prop="homeclothes" label="衣柜" align="center">
          </el-table-column>
          <el-table-column
            prop="createtime"
            label="授予时间"
            show-overflow-tooltip
            align="center"
            width="200px"
          >
            <template slot-scope="scope">
              {{ getFormattedTime(scope.row.createtime) }}
            </template>
          </el-table-column>
          <el-table-column prop="unitstatus" label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.familystatus == 1">完好</span>
              <!-- <span v-if="scope.row.familystatus == null">待维修</span> -->
              <span v-if="scope.row.familystatus == 2">待维修</span>
            </template>
          </el-table-column>
          <el-table-column prop="familystatus" label="操作状态" align="center">
            <template slot-scope="scope">
              <el-switch
                @change="handleSwitchChange2(scope.row)"
                v-model="scope.row.familystatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
              >
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next, jumper"
        :page-size="pageSize"
        :current-page="cur_page"
        :page-sizes="[5, 10, 20, 50]"
        :total="total"
        background
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "userIndex",

  data() {
    return {
      //顶部
      topsearch: {
        value: "",
        value2: [],
        homenum: "",
        familystatus: "",
      },

      // 开关
   
      deviceleft: {}, // 定义 device 对象
      valueList: [
        {
          value: 1,
          text: "完好",
        },
        {
          value: 2,
          text: "待维修",
        },
      ],
      device: [
        {
          smartstatus: null,
          homenum: "",
          familystatus: "",
        },
      ],
      device2: [],
      activeName: "1",
      // 日期选择
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      valueChange: true,
      value2: [],
      formattedDates: [],
      nickname: "",

      familystatus: "",
      homenum: "",
      homeaddress: "",
      context: "",
      dialogTableVisible: false,
      value: "",
      tableData: [],
      loading: false,
      loaded: false,
      total: 0,
      cur_page: 1,
      pageSize: 10,
      pageNo: 1,
    };
  },
  computed: {
    // 计算属性：格式化时间
    getFormattedTime() {
      return (time) => {
        if (time && typeof time === "string") {
          // 截取前20个字符，并在第20个字符后插入一个空格
          return time.slice(0, 10) + " " + time.slice(11, 19);
        }
        return time || ""; // 如果时间为空或不是字符串，返回原始值或空字符串
      };
    },
  },
  created() {
    this.getData();
    //处理时间
    // this.formatDates();
  },

  methods: {
    async handleSwitchChange(row) {
      try {
        await this.$confirm("确定更新该智能设备状态？", "提示", {
          type: "warning",
        });
        // 用户点击了“确定”按钮
        this.$axiosToken({
          url: "/house/updatesmartStatus",
          method: "post",
          data: {
            id: row.id,
            smartstatus: row.smartstatus,
          },
          success: (result) => {
            console.log(result);
            // if (result.smartstatus === 1) {
            //   this.valueleft = false;
            // } else if (result.smartstatus === 2) {
            //   this.valueleft = true;
            // }
            this.device.smartstatus = result.smartstatus;
            console.log(this.device.smartstatus);
            this.getData();
          },
        });
      } catch (error) {
        // 用户点击了“取消”按钮
        // this.valueleft = row.smartstatus === 1 ? false : true;
        this.getData();
      }
    },
    async handleSwitchChange2(row) {
      try {
        await this.$confirm("确定更新该家居设备状态？", "提示", {
          type: "warning",
        });
        // 用户点击了“确定”按钮
        this.$axiosToken({
          url: "/house/updatefamilyStatus",
          method: "post",
          data: {
            id: row.id,
            familystatus: row.familystatus,
          },
          success: (result) => {
            console.log(result);
            // if (result.familystatus === 1) {
            //   this.valueleft = false;
            // } else if (result.smartstatus === 2) {
            //   this.valueleft = true;
            // }
            this.device.familystatus = result.familystatus;
            // console.log(this.device.smartstatus);
            this.getData();
          },
        });
      } catch (error) {
        // 用户点击了“取消”按钮
        // this.valueleft = row.familystatus === 1 ? false : true;
        this.getData();
      }
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
      this.search();
    },
    handleSizeChange(val) {
      this.cur_page = 1;
      this.pageSize = val;
      this.getData();
      this.search();
    },
    // 获取用户表信息
    getData() {
      this.loading = true;
      this.$Axios({
        url: "/house/searchdeviceList",
        method: "get",
        data: {
          pageNum: this.pageSize,
          currPage: this.cur_page - 1,
        },
        success: (result) => {
          this.device = result.data;
          this.device2 = result.data;
          this.total = result.total;
          // this.valueleft = result.data.smartstatus;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },
    // 查询
    search() {
      this.loading = true;
      this.$axiosToken({
        url: "/house/searchdeviceList",
        method: "get",
        data: {
          smartstatus: this.topsearch.value || null,
          familystatus: this.topsearch.familystatus,
          homenum: this.topsearch.homenum,
          startDate: this.topsearch.value2[0] ? this.topsearch.value2[0] : "",
          endDate: this.topsearch.value2[1] ? this.topsearch.value2[1] : "",
          pageNum: this.pageSize,
          currPage: this.cur_page - 1,
        },
        success: (result) => {
          this.device = result.data;
          this.total = result.total;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },
    // 新增
    add() {
      this.$nextTick(() => {
        this.$refs.addDialog.actionType = "add";
        this.$refs.addDialog.dialogTableVisible = true;
        this.$refs.addDialog.formData = Object.assign({});
      });
    },
    // 重置
    reset() {
      this.getData();
      this.value = "";
      this.context = "";
    },
    // 编辑
    edit(row, index) {
      // this.$nextTick(() => {
      //     this.$refs.addDialog.dialogTableVisible = true;
      //     this.$refs.addDialog.actionType = "edit";
      //     console.log(row,'行')
      //     this.$refs.addDialog.formData = Object.assign({},row)
      // });
      // console.log(row, "行");
      this.$refs.addDialog.actionType = "edit";
      this.$refs.addDialog.dialogTableVisible = true;
      this.$refs.addDialog.init(row);
    },
  },
};
</script>

<style scoped>
.el-tabs {
  margin: 10px 0;
}
.block {
  margin: 0 20px;
}
.block .day {
  width: 50px;
}
.top {
  width: 100%;
  display: flex;
}
.el-input__inner {
  font-size: 14px;
  height: 36px;
}
.el-input:nth-child(1) {
  width: 30%;
  border-radius: 4px;
}
.el-input:nth-child(2) {
  width: 30%;
  margin-left: 10px;
  border-radius: 4px;
}
.el-input:nth-child(3) {
  width: 22%;
  margin-left: 10px;
  border-radius: 4px;
}
.button1,
.button2,
.button3 {
  border-radius: 4px;
  margin-left: 15px;
  color: #fff;
  font-size: 14px;
  width: 9%;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 6px 10px;
}
.el-button--mini,
.el-button--small {
  border-radius: 5px;
}

.list {
  margin-top: 25px;
}
.pagination {
  text-align: right;
  margin: 20px 0;
}
.el-input.el-input--mini.el-input--suffix > .el-input__inner {
  height: 28px;
}
.top .ipt {
  width: 300px;
}
</style>